<template>
    <div class="list">
        <div>
            <div class="hot-cities">
                <div class="hot-cts-title">热门城市</div>
                <ul class="clearfix">
                    <li v-for="item in computedCities" :key="item.id" :class="item.borderType">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <div class="alphabet-menu">
                <div class="alphabet-menu-title">字母排序</div>
                <ul class="clearfix">
                    <li v-for="(item,index) in letters" :key="index">{{item}}</li>
                </ul>
            </div>
            <div class="alphabet-list" v-for="(item,key) in cities" :key='key' >
                <div class="alphabet-list-title">{{key}}</div>
                <ul class="clearfix">
                    <li v-for="innerItem in item" :key="innerItem.id">
                        {{innerItem.name}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'CityList',
    props:{
        hotCities:Array,
        cities:Object
    }
}
</script>
<style lang="stylus" scoped>
div{
    box-sizing: border-box;
}
.clearfix::after{
    display: block;
    content: "";
    clear: both;
}
.list{
    position: absolute;
    top: 0.88rem;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.hot-cities{
    width: 100%;
    height: 4.32rem;
}
.hot-cities .hot-cts-title,
.alphabet-menu .alphabet-menu-title,
.alphabet-list .alphabet-list-title{
    width: 100%;
    height: .72rem;
    line-height: .72rem;
    padding: 0 .2rem;
    background-color: #f5f5f5;
}
.hot-cities ul li{
    float: left;
    width: 33.33%;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
}
.alphabet-menu ul{
    height: 4.2rem;
    margin: .3rem 0;
}
.alphabet-menu ul li{
    float: left;
    width: 16.67%;
    height: .9rem;
    text-align: center;
}
.alphabet-list ul li{
    float: left;
    width: 25%;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
}
</style>
